<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="../static/plt/bootstrap-3.4.1/css/bootstrap.css">
  <link rel="stylesheet" href="../static/plt/Font-Awesome-3.2.1/css/font-awesome.css">
     <style>
         a {
            text-decoration: none;
             cursor: pointer;
             color: #0f0f0f;
         }

         table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      text-align: center;
      /*border: 1px solid black;  框线  */
     padding: 8px;
    }
    </style>
</head>
<body>

    <div class="panel panel-default">
  <div class="panel-heading">
      <span><h3 class="panel-title" style="color: #a94442;font-size: 25px;font-family: Roboto, serif">成员管理 : <a href="{{ url_for('returnMain', name='管理员') }}" style="margin-left: 1250px;font-size: 25px;color: #0f0f0f"><span class="glyphicon glyphicon-new-window" aria-hidden="true"></span> 返回</a></h3></span>
  </div>
  <div class="panel-body">
    <table class="table table-bordered" id="data-table">
        <thead>
          <tr>
            <th>账户名</th>
            <th>密码</th>
            <th>姓名</th>
            <th>手机号</th>
            <th>地址</th>
            <th>权限</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
        {% for item in dict %}
          <tr>
            <td>{{item['username']}}</td>
            <td>{{item['password']}}</td>
            <td>{{item['name']}}</td>
            <td>{{item['mobile']}}</td>
            <td>{{item['address']}}</td>
            <td>{{item['access']}}</td>
            <td>
       <button onclick="editTable()" type="submit" class="update btn btn-warning btn-sm "><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;&nbsp;&nbsp;修改&nbsp;&nbsp;&nbsp;</button><button type="submit" class="delete btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;&nbsp;&nbsp;删除&nbsp;&nbsp;&nbsp;</button>
            </td>
              {% endfor %}
          </tr>

        </tbody>
      </table>
  </div>
</div>
    <script src="../static/js/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src="../static/plt/bootstrap-3.4.1/js/bootstrap.js"></script>
    <script>
$(".delete").on("click", function() {
  if (confirm("是否删除此条数据？")) {
    var username = $(this).closest("tr").find("td:eq(0)").text();
    $.ajax({
      url: "/deleteuser", // 后端API地址
      type: "POST",
      data: { id: username },
      success: function(response) {
        // 处理成功的情况，例如提示用户删除成功
        alert("删除成功,刷新网页查看最新结果");
      },
      error: function(xhr, status, error) {
        // 处理错误的情况，例如提示用户删除失败
        alert("删除失败：" + error);
      }
    });
  } else {
    ;
  }
});
$(".update").on("click", function() {
   if (confirm("是否修改此条数据？")) {
    var row = $(this).closest("tr");
    row.find("td:not(:last-child)").attr("contentEditable", "true");
    row.find("td:first-child").attr("contentEditable", "false");
    row.find("td:nth-child(2)").focus();
    } else {
        // 不进行任何操作
    }
  });
$("body").on("keydown", function(e) {
  if (e.keyCode === 13) {
    var row = $(e.target).closest("tr");
    row.find("td:not(:last-child)").attr("contentEditable", "false");
    var modifiedData = [];
    row.find("td:not(:last-child)").each(function() {
    modifiedData.push($(this).text());
  });
  $.ajax({
    url: '/updateuser',
    type: 'POST',
    data: JSON.stringify({data: modifiedData}),
    contentType: 'application/json; charset=utf-8',
    success: function(response) {
          alert("更新成功,刷新网页查看最新结果");
    },
    error: function(error) {
        alert("更新失败：" + error);
  }
});
  }
});

btn.onclick = function() {
  modal.style.display = "block";
}
// 当用户点击关闭按钮时，隐藏模态框
span.onclick = function() {
  modal.style.display = "none";
}
// 当用户点击确认按钮时，执行相应操作
document.getElementById("confirmBtn").onclick = function() {
  var inputInfo = document.getElementById("inputInfo").value;
  $.ajax({
    url: '/search',
    type: 'POST',
    data: JSON.stringify({data: inputInfo}),
    contentType: 'application/json; charset=utf-8',
     success: function(response) {
       alert("查询结果：" + response.message);
     },
     error: function() {
                            alert("查询失败，请重试。");
                        }
});modal.style.display = "none";
}
// 当用户点击取消按钮时，隐藏模态框
document.getElementById("cancelBtn").onclick = function() {
  modal.style.display = "none";}
</script>

</body>
</html>